<template>
  <div>
    <basic-container>
      <div class="filter-container">
        <el-button
          v-waves
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="addRow"
        >添加</el-button>
        <el-input
          v-model="listQuery.title"
          style="width: 220px;"
          size="small"
          placeholder="活动名称"
          class="filter-item"
          clearable
          @keyup.enter.native="getList"
        />
        <el-select
          v-model="listQuery.status"
          size="small"
          placeholder="上线状态"
          class="filter-item"
          clearable
        >
          <el-option
            v-for="(opt) in $constants.goodsStatusOptions"
            :key="opt.value"
            :label="opt.title"
            :value="opt.value"
          />
        </el-select>
        <el-select
          v-model="listQuery.activity_type"
          size="small"
          placeholder="活动类型"
          class="filter-item"
          clearable
        >
          <el-option
            v-for="(title,value) in $constants.goodsActivityTypeEnum"
            :key="value"
            :label="title"
            :value="value"
          />
        </el-select>
        <el-button
          v-waves
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="getList"
        >搜索</el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="tableHeight"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="活动名称" width="180px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="活动封面" width="180px" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.cover|imgUrl" alt style="height:60px;" />
          </template>
        </el-table-column>
        <el-table-column label="活动类型" width="120px" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.activity_type|onOrOffColorFilter"
            >{{ scope.row.activity_type | goodsActivityTypeFilter }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120px" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status|onOrOffColorFilter">{{ scope.row.status|onOrOffFilter }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="170px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.start_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="170px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.end_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格类型" width="120px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price_type | priceTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品数量" width="100px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.goods_sku_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格/折扣" width="100px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.price_type==0">--</span>
            <span v-if="scope.row.price_type==1">{{ scope.row.price_value }}元</span>
            <span v-if="scope.row.price_type==2">{{ scope.row.price_value/10 }}折</span>
          </template>
        </el-table-column>
        <el-table-column label="会员价格/折扣" width="120px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.price_type==0">--</span>
            <span v-if="scope.row.price_type==1">{{ scope.row.member_price_value }}元</span>
            <span v-if="scope.row.price_type==2">{{ scope.row.member_price_value/10 }}折</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="160px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="160px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.modify_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          min-width="360px"
          fixed="right"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editRow(scope.row)">修改</el-button>
            <el-button type="primary" size="mini" @click="handleGoodsManager(scope.row)">商品管理</el-button>
            <el-button
              v-if="scope.row.status==0"
              type="warning"
              size="mini"
              @click="handleOnline(scope.row)"
            >上线</el-button>
            <el-button v-else type="info" size="mini" @click="handleOffline(scope.row)">下线</el-button>
            <el-button size="mini" type="danger" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.pageNo"
          :page-sizes="[10,20,30, 50]"
          :page-size="listQuery.pageSize"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="900px">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="left"
          label-width="120px"
          style="margin-left:50px;margin-right:50px;"
        >
          <el-form-item label="活动名称" prop="title">
            <el-input v-model="temp.title" />
          </el-form-item>
          <el-form-item label="活动类型" prop="activity_type">
            <el-select
              v-model="temp.activity_type"
              size="small"
              placeholder="活动类型"
              class="filter-item"
              clearable
            >
              <el-option
                v-for="(title,value) in $constants.goodsActivityTypeEnum"
                :key="value"
                :label="title"
                :value="value"
              />
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开始时间" prop="start_time">
                <el-date-picker
                  v-model="temp.start_time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="filter-item"
                  style="width: 220px;"
                  type="datetime"
                  placeholder="选择结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="end_time">
                <el-date-picker
                  v-model="temp.end_time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="filter-item"
                  style="width: 220px;"
                  type="datetime"
                  placeholder="选择结束时间"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="价格类型" prop="price_type">
            <el-radio
              v-for="(item,itemIndex) in priceTypeTextEnum"
              v-model="temp.price_type"
              :key="item"
              :label="itemIndex"
            >{{ item }}</el-radio>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                v-if="temp.price_type>0"
                :label="temp.price_type==1?'统一价':'折扣（%）'"
                prop="price_value"
              >
                <el-input-number :min="0" v-model="temp.price_value" placeholder="统一价/折扣" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="temp.price_type>0"
                :label="temp.price_type==1?'会员统一价':'会员折扣（%）'"
                prop="member_price_value"
              >
                <el-input-number :min="0" v-model="temp.member_price_value" placeholder="会员统一价/折扣" />
              </el-form-item>
            </el-col>
          </el-row>
          <template>
            <el-form-item label="库存类型" prop="stock_type">
              <el-radio
                v-for="(item,itemIndex) in stockTypeTextEnum"
                v-model="temp.stock_type"
                :key="item"
                :label="itemIndex"
              >{{ item }}</el-radio>
            </el-form-item>
            <el-form-item
              v-if="temp.stock_type!==''"
              :label="temp.stock_type==1?'统一比例（%）':'统一数量'"
              prop="stock"
            >
              <el-input-number :min="1" v-model="temp.stock" placeholder="统一比例/统一数量" />
            </el-form-item>
          </template>
          <el-form-item label="活动封面" prop="cover">
            <el-upload
              :action="UPLOAD_URL"
              :show-file-list="false"
              :headers="getHeaders()"
              :on-success="handleAvatarSuccess('cover')"
              :before-upload="beforeAvatarUpload"
              class="avatar-uploader"
            >
              <img v-if="temp.cover" :src="temp.cover|imgUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button :loading="isSubmiting" type="primary" @click="submitFormAction">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :title="'《'+ currentActivity.title + '》活动商品管理'"
        :visible.sync="activityGoodsDialogShowFlag"
        width="1400px"
      >
        <activityGoods
          ref="activityGoods"
          v-model="currentActivity"
          @onImportGoodsSku="handleImportGoodsSku"
        />
      </el-dialog>
      <el-dialog :visible.sync="importGoodsDialogShowFlag" title="导入商品" width="920px">
        <importGoods v-model="currentActivity" @onSelectGoodsSku="handleOnSelectGoodsSku" />
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import { priceTypeTextEnum, stockTypeTextEnum } from "@/constants/constants";
import importGoods from "./importGoods";
import activityGoods from "./activityGoods";
export default {
  components: {
    importGoods,
    activityGoods
  },
  filters: {
    priceTypeFilter(v) {
      return priceTypeTextEnum[v];
    }
  },
  data() {
    return {
      priceTypeTextEnum,
      tableHeight: 100,
      stockTypeTextEnum,
      activityGoodsDialogShowFlag: false,
      currentActivity: {},
      importGoodsDialogShowFlag: false,
      list: null,
      isSubmiting: false,
      isEditing: false,
      dialogFormVisible: false,
      listLoading: true,
      temp: {
        cover: "",
        title: "",
        activity_type: "",
        start_time: "",
        end_time: "",
        stock_type: "",
        price_value: "",
        stock: "",
        price_type: "",
        member_price_value: ""
      },
      total: 0,
      rules: {
        cover: [
          {
            required: true,
            message: "请上传封面",
            trigger: "change"
          }
        ],
        stock: [
          {
            required: true,
            message: "请设置库存",
            trigger: "change"
          }
        ],
        title: [
          {
            required: true,
            message: "活动名称不能为空",
            trigger: "change"
          }
        ],
        activity_type: [
          {
            required: true,
            message: "活动类型不能为空",
            trigger: "change"
          }
        ],
        price_type: [
          {
            required: true,
            message: "请选择价格类型",
            trigger: "change"
          }
        ],
        stock_type: [
          {
            required: true,
            message: "请选择库存类型",
            trigger: "change"
          }
        ],
        price_value: [
          {
            required: true,
            message: "请输入价格/折扣",
            trigger: "change"
          }
        ],
        member_price_value: [
          {
            required: true,
            message: "请输入会员价格/折扣",
            trigger: "change"
          }
        ],
        start_time: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "change"
          }
        ],
        end_time: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: "change"
          }
        ]
      },
      listQuery: {
        title: "",
        pageNo: 1,
        pageSize: 10
      }
    };
  },

  created() {
    this.tableHeight = window.innerHeight - 300;
    this.getList();
  },
  methods: {
    handleOnSelectGoodsSku() {
      this.$refs.activityGoods.loadGoodsSku();
    },
    handleImportGoodsSku() {
      this.importGoodsDialogShowFlag = true;
    },
    handleGoodsManager(row) {
      this.currentActivity = row;
      this.activityGoodsDialogShowFlag = true;
    },
    deleteRow(row) {
      this.confirm("确认删除该活动吗").then(_ => {
        this.$service.goodsActivity.remove([row.id]).then(_ => {
          this.success();
          this.getList();
        });
      });
    },
    handleOnline(row) {
      this.confirm("确认上线该活动吗").then(() => {
        this.$service.goodsActivity.setOnline([row.id]).then(() => {
          row.status = 1;
          this.success();
        });
      });
    },
    handleOffline(row) {
      this.confirm("确认下线该活动吗").then(() => {
        this.$service.goodsActivity.setOffline([row.id]).then(() => {
          row.status = 0;
          this.success();
        });
      });
    },
    addRow() {
      this.dialogFormVisible = true;
      this.isEditing = false;
      Object.keys(this.temp).forEach(el => {
        this.temp[el] = "";
      });
    },
    editRow(row) {
      this.dialogFormVisible = true;
      this.isEditing = true;
      this.temp = Object.assign(this.temp, row);
    },
    handleCurrentChange(page) {
      this.listQuery.pageNo = page;
      this.getList();
    },
    handleSizeChange(size) {
      this.listQuery.pageSize = size;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      this.$service.goodsActivity
        .list(this.listQuery)
        .then(response => {
          this.list = response.rows || [];
          this.total = response.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    submitFormAction() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.isSubmiting = true;
          const func = this.isEditing
            ? this.$service.goodsActivity.modify
            : this.$service.goodsActivity.create;
          func(this.temp)
            .then(() => {
              this.success();
              this.dialogFormVisible = false;
              this.getList();
            })
            .finally(() => {
              this.isSubmiting = false;
            });
        }
      });
    }
  }
};
</script>
